<!DOCTYPE html>
<html>
<head>
	<title>jquery_table</title>
	 <meta charset="utf-8">	
</head>
<link rel="stylesheet" type="text/css" href="yu/css/123.css">

<body>
   <table border="1">
    <thead>
          <tr>
    	     <th colspan="5" style="height:50px; background-color: blue;color: #fff;font-size: 30px;">表格</th>
          </tr>
          
			    	<tr>
			    		<th>序号</th>
			    		<th>商品</th>
			    		<th>单价</th>
			    		<th>数量</th>
			    		<th>操作</th>
			    	</tr>
		  </thead>
       <tbody class="fee">
			    	<tr>
			    		<td class="feedn">1</td>
			    		<td>樱桃</td>
			    		<td class="feed">5.5</td>
			    		<td>3</td>
			    		<td>
			    			<button class="delRow" onclick="delRow(this)">删除</button>
			    			<button class="delup" onclick="delup(this)">添加</button>
			    		</td>
			    	</tr>

			    	<tr>
			    		<td>2</td>
			    		<td>小丸子</td>
			    		<td>6.5</td>
			    		<td>4</td>
			    		<td>
			    			<button class="delRow" onclick="delRow(this)">删除</button>
			    			<button class="delup" onclick="delup(this)">添加</button>
			    		</td>

			    	</tr>

			    	<tr>
			    		<td>3</td>
			    		<td>小龙虾</td>
			    		<td>34.5</td>
			    		<td>1</td>
			    		<td>
			    			<button class="delRow" onclick="delRow(this)">删除</button>
			    			<button class="delup" onclick="delup(this)">添加</button>
			    		</td>
			    	</tr>

			    	<tr>
			    		<td>4</td>
			    		<td>牛扒</td>
			    		<td>55.5</td>
			    		<td>2</td>
			    		<td>
			    			<button class="delRow" onclick="delRow(this)">删除</button>
			    			<button class="delup" onclick="delup(this)">添加</button>
			    		</td>

			    	</tr>
             <tr>
			    	      <th colspan="5">
			    	           <p>商品总计:<span id="totalPrice" style="color: red;"></span></p>
			    	      </th>
			    	</tr>
			    </tbody>
    </table>
     <div class="wyey" style="display: none;">
    	<div class="foe-we">
    		<h3 class="wtye">商品数据列表</h3>
    		<div class="foe-wr">
    			<input type="" name="goods" value="" placeholder="请选择商品名称">
    			<input type="" name="price" value="" placeholder="请选择商品数量">
    			<input type="" name="num" value="" placeholder="请选择商品单价">
    		
    		<div class="qwq">
    			<button class="ttt">确定</button>
    			<button class="ggg">取消</button>
    		</div>
    		<div class="werrre">
    			<em></em>
    		</div>
    	</div>
    	</div>
    </div> 
<script type="text/javascript" src="yu/css/jquery3.JS"></script>
    <script type="text/javascript">
      // $('tbody tr:odd').addClass('even');
      var gdhg=function(){
    var totalPrice = 0;
    $("tbody tr").each(function(){
        var sCheck = $(this).find('td:eq(2)').text();
        var priceq = $(this).find('td:eq(3)').text();
        // console.log(sCheck[0]);
        var wqeqe=sCheck*priceq;
        totalPrice+=wqeqe;

    });
    $("#totalPrice").text(totalPrice);
  };
   gdhg();

      $('tbody tr:odd').css('background-color','#ccc');
    	$('tbody tr:even').css('background-color','#fff');

    	function delRow(abt){
               $(abt).parent().parent().remove();
               $('tbody tr').removeClass();
               $('tbody tr:odd').addClass('odd');
               for (var i = 0; i < $('tbody tr').length; i++) {
                 $('tbody tr:eq('+i+')').find('td:first').text(i+1);
                  gdhg();
               }
    	}
    	function delup(abe){
    		$(abe).parent().parent().click(function(){
    			$('.wyey').css('display','block');
    		})
    	}    	   
    	$('.werrre, .ggg').click(function(){
          $('.wyey').hide();
          $('input[name=goods]').val('');
          $('input[name=price]').val('');
          $('input[name=num]').val('');
    	})
    	var gjhgjg=function(){
    			$('.wyey').css('display','block');    		
    	}
        $('.ttt').click(function(){
          $('.wyey').hide();  
          var ntr= $('tbody tr').length;
          var sn= $('tbody tr:eq('+(ntr-2)+')').find('td:first').text();
          var goods=$('input[name=goods]').val();
          var price=$('input[name=price]').val();
          var num=$('input[name=num]').val();  
          var tr=$('<tr><td>'+(parseInt(sn)+1)+'</td><td>'+goods+'</td><td>'+price+'</td><td>'+num+'</td><td>\
          <button onclick="delRow(this)">删除</button> <button onclick="gjhgjg()">添加</button></td></tr>');

          $('tbody tr:eq('+(ntr-2)+')').after(tr);
           gdhg();
         });


  
    </script>   
</body>
</html>